<template>
  <div class="top1">
    <el-card class="box-card">
      <el-form
        label-width="80px"
        class="userform"
        :model="from"
        ref="from"
        :inline="true"
      >
        <el-form-item label="用户名称">
          <el-input v-model="from.username" style="width: 180px" />
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="from.email" style="width: 180px" />
        </el-form-item>
        <el-form-item prop="role_id" label="角色">
          <el-select
            v-model="from.role_id"
            placeholder="请选择"
            style="width: 180px"
          >
            <el-option
              v-for="item in employeesData.role"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="closedel">清除</el-button>
          <el-button type="primary" @click="addEvent">+新增用户</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="button">
      <template>
        <el-table :data="items" style="width: 100%">
          <el-table-column prop="id" type="index" width="50" label="序号" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="email" label="邮箱" width="180px" />
          <el-table-column prop="phone" label="电话" />

          <el-table-column
            :formatter="formatterEnableRole"
            prop="role_id"
            label="角色"
          />
          <el-table-column prop="remark" label="备注" width="150px" />
          <el-table-column prop="status" label="状态">
            <template v-slot="{ row }">
              <div :class="{ textColor: row.status === 0 }">
                {{ row.status === 0 ? '禁用' : '启用' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300px">
            <template v-slot="{ row }">
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button type="text" @click="statusEvent(row)">启用</el-button>
              <el-button type="text" @click="delEvent(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="from.page"
            :page-size.sync="from.limit"
            :page-sizes="[1, 5, 10, 300]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="getData"
            @current-change="getData"
          />
        </div>
      </template>
    </el-card>
    <!-- 弹窗 -->
    <Add ref="add" @getData="getData"></Add>
  </div>
</template>
<script>
import { UserList, UserRemove, UserStatus } from '@/api/cyy'
import Add from './components/add.vue'
import employeesData from '@/api/constant/employess'
// import axios from 'axios'
export default {
  components: {
    Add
  },
  data () {
    return {
      // page: 1,
      // pagesize: 5,
      total: 10,
      items: [],
      employeesData: employeesData,
      from: {
        username: '', //	是	string	用户名
        email: '', //	是	string	邮箱
        role_id: '', //	是	string	角色 、2 管理员、3 老师、4 学生
        page: 1, //	否	string	页码 默认为1
        limit: 10 //	否	string	页尺寸 默认为10
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    //用户列表
    async getData () {
      const res = await UserList(this.from)
      //存储total
      this.total = res.data.pagination.total
      // this.page = res.data.pagination.page
      this.items = res.data.items
      console.log('用户列表', res)
    },
    //打开弹窗
    addEvent () {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    //未启用状态数据转换
    formatterEnableState (row, column, cellValue, index) {
      const findItem = employeesData.status.find(item => +item.id === cellValue)
      return findItem ? findItem.value : '-'
    },
    //角色数据转换
    formatterEnableRole (row, column, cellValue, index) {
      const findItemrole = employeesData.role.find(
        item => +item.id === cellValue
      )
      return findItemrole ? findItemrole.value : '-'
    },
    //删除
    delEvent (row) {
      this.$confirm('您确定删除该数据吗？', '温馨提示')
        .then(async () => {
          //调用删除api
          const res = await UserRemove({
            id: row
          })
          console.log('row', res)
          //提示
          this.$message.success('删除成功')
          //刷新数据
          // 如果删除的数据页码>1 且当前页只有一条数据时，页码要往前一页
          if (this.from.page > 1 && this.items.length <= 1) {
            this.from.page--
          }
          this.getData()
        })
        .catch(() => {})
      // console.log('删除成功')
    },
    //编辑
    edit (row) {
      //打开弹窗
      this.$refs.add.isShow = true
      // 修改新增弹框组件内的mode的值
      this.$refs.add.mode = 'edit'
      // 让弹框组件数据回显
      this.$refs.add.from = JSON.parse(JSON.stringify(row))
    },
    //清除按钮
    closedel () {
      // 重置表单清除表单验证
      this.$refs.from.resetFields()
      this.from = {
        username: '', //	是	string	用户名
        email: '', //	是	string	邮箱
        phone: '', //	是	string	手机号
        role_id: '', //	是	string	角色 、2 管理员、3 老师、4 学生
        status: '', //	否	string	1(启用)0(禁用)
        remark: '' //	否	string	备注
      }
    },
    //启用按钮
    async statusEvent (row) {
      const res = await UserStatus({
        id: row.id
      })
      this.$message.success('状态更改成功')
      this.getData()
    },
    //搜索按钮
    async search () {
      // console.log('搜索')
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.top1 {
  background-color: #ccc;
  height: 800px;
  // padding-top: 10px;
}
.box-card {
  // margin: 0 20px 0 20px;
  .userform {
    // display: flex;
    text-align: left;
    width: 100%;
  }
}
::v-deep .el-dialog__header {
  color: #ffff;
  height: 54px;
  background: linear-gradient(90deg, #01c5fa, #1394fa);
  .el-dialog__title {
    height: 53px;
    color: #ffff;
    font-size: 16px;
  }
  .el-icon-close:before {
    color: #ffff;
  }
}
.button {
  // margin: 0 20px 20px 20px;
  .textColor {
    color: red;
  }
  .block {
    // text-align: right;
    padding-top: 15px;
  }
}
</style>
